<template>

  <div class="onlinestore">
    <ul >
      <li >
        <a href="https://cn.aliyun.com/">
          <img src="https://th.bing.com/th/id/R.a735e5419d66672250be99392c912558?rik=PO97SlrcPP5DYw&riu=http%3a%2f%2fwww.logosj.com%2fwp-content%2fuploads%2f2022%2f10%2f%e5%b0%81%e9%9d%a2.jpg&ehk=eDXqMc%2bxv2wsBebuWcMLaTx2SNBXaFZqBgK0RnUsKgA%3d&risl=&pid=ImgRaw&r=0">
          <p>Alibaba</p>
        </a>
      </li>
      <li>
        <a href="https://console.cloud.tencent.com/">
          <img src="https://media.printables.com/media/prints/406118/images/3378551_fa574af3-c8ad-4f81-a16a-2bbbf0ce7ea4/thumbs/cover/1200x630/png/tencent-render.png">
          <p>Tencent</p>
        </a>
      </li>
      <li>
        <a href="https://us-east-1.console.aws.amazon.com/console/home?nc2=h_ct&region=us-east-1&src=header-signin#">
          <img src="https://th.bing.com/th/id/OIP.031SZwuZKZNX56lWrn6zOwAAAA?rs=1&pid=ImgDetMain">
          <p>Amazon US</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';


  export default {
    setup(){
      const data = reactive({

      })

      const  onlinestore = (Event: any) => {
        console.log(Event);
        
      }

      return{
        ...toRefs(data),
        onlinestore
      }
    }

  }

</script>

<style scoped>
.onlinestore {
  height: 600px;
  width: 100%;
  margin-top: 200px;
  background-color: #f8f8f8;
  
}
ul {
  display: flex;
  justify-content: space-evenly;
  
}


.onlinestore li {
  height: 320px;
  width: 384px;
  margin-top: 84px;
  background-color: white;
  transition: all 0.5s;
  text-align: center;
  cursor:pointer;
}

li:hover {
  transform: translateY(-25px);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
}

.onlinestore img {
  height: 200px;
  width: 100%;

}
.onlinestore p {
  font-size: 15px;
  margin-top: 40px;
  font-weight: bold;
}

</style>